<template>
  <div class="home">
    <div class="content">
      <h4>登录账号</h4>
      <p>虾米 - 严选商城欢迎您</p>
      <div :class="`input_ct ${rePhone==0?'':rePhone==1?'success':'err'}`">
        <input type="text" placeholder="手机号" v-model="mobile" @blur="mobileFtn">
        <span v-if="rePhone == 2">必填</span>
      </div>
      <div :class="`input_ct ${rePwd==0?'':rePwd==1?'success':'err'}`">
        <input type="text" v-model="pwd" placeholder="密码" @blur="pwdFtn">
        <span v-if="rePwd == 2">必填</span>
      </div>
      <button class="loginbtn" @click="login">登录</button>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';
import api from '../api/index';
export default {
  name: 'Home',
  components: {

  },
  setup(props) {
    const data = reactive({
      rePhone: 0, // 0 代表没有触摸过，1代表成功，2代表失败
      rePwd: 0,
      mobile: '', // 手机号
      pwd: '' , // 密码
    })

    const mobileFtn = () => { // 手机号的验证函数
      let rule = /^1[3-9][0-9]{9}$/ // test 正则验证的方法
      data.rePhone = rule.test(data.mobile)?1:2
      //  if(!rule.test(data.mobile)){
      //     alert('手机号码不正确')
      //  }
    }
    const pwdFtn = () => { // 密码的正则验证
      // data.rePwd = data.pwd?1:2
      let rule = /^[A-Za-z0-9_]{6,18}/;
      data.rePwd = rule.test(data.pwd)?1:2
    }
    const login = () =>{
      if (data.rePhone == 2 || data.rePwd == 2){
        return
      }
      api.post(`https://api.it120.cc/small4/user/m/login?deviceId=007&deviceName=monkey&mobile=${data.mobile}&pwd=${data.pwd}`).then(res => {
        console.log(res);
      })
    }
    return{
      ...toRefs(data),
      mobileFtn,
      pwdFtn,
      login
    }
  }
}
</script>
<style lang="scss" scoped>
  .home{
    height: 100%;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    .content{
      padding: 0 30px;
      box-sizing: border-box;
      border: 1px solid #f5f5f5;
      h4{
        margin-top: 30px;
        font-size: 26px;
      }
      p{
        margin: 20px 0;
        font-size: 15px;
        color: #909090;
      }
      .input_ct{
        margin-top: 10px;
        display: flex;
        height: 50px;
        border: 1px solid transparent;
        border-radius: 5px;
        background: #f5f5f5;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
        input{
          border:none;
          height: 100%;
          background: transparent;
          outline: none;
          flex: 1;
        }
        span{
          font-size: 12px;
          color: red;
        }
      }
      .success{
        border-color: rgb(56, 219, 36);
        background: rgb(225, 255, 223);
      }
      .err{
        border-color: rgb(225, 44, 30);
        background: rgb(255, 233, 228);
      }
      .loginbtn{
        border: none;
        border-radius: 5px;
        height: 50px;
        width: 200px;
        background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
        color: #fff;
        margin: 20px auto;
        display: block;
      }
    }
  }
</style>
